﻿/******************************************************************************
* File description: CustomComboColorPicker.qml
* Function: 基础按钮
* Current Version: 1.0.0
 *****************************************************************************/

import QtQuick 2.12
import QtGraphicalEffects 1.0

Item {


    id: root

    // public ===================================================================================

    property string title: ""           // 按钮标题

    // 点击信号
    signal clicked(var mouseX, var mouseY)
    signal released(var mouseX, var mouseY)
    signal pressed(var mouseX, var mouseY)

    // 按钮禁用时触发的点击信号
    signal clicked_disabled(var mouseX, var mouseY)
    signal released_disabled(var mouseX, var mouseY)

    // 按钮尺寸
    width: autoWidth ? (idText.contentWidth+autoWidthMargin*2 + ((button_icon!==""&&iconDirect%2===0)?icon_size+4*dp:0)) : 120*dp
    height: 40*dp

    property bool autoWidth: false           // 按钮宽度根据文字(仅在未设置Width时生效
    property real autoWidthMargin: config.fontsize*0.5

    property real radius: 3*dp              // 圆角
    property bool isSelected: false         // 是否为选中状态
    property bool enabled: true             // 是否禁用

    // 预设样式
    property bool defaultMode1: false       // 主题色按钮
    property bool defaultMode2: false       // 白色+边框按钮
    property bool defaultMode3: false       // 主题色文字无边框按钮
    property bool defaultMode4: false       // 竖向渐变按钮

    // 按钮样式
    property string text_size: config.fontsize              // 文字尺寸
    property bool   font_italic: false
    property bool   font_bold: false
    property double icon_size: text_size*1.4       // 图标尺寸
    property bool   colorGradient: false                    // 颜色渐变
    property int    gradientDirect: 0                       // 渐变方向 0横向 1竖向
    property int    iconDirect: 0                           // Icon位置 0左 1上 2右 3下

    // 按钮可在一边增加线条
    property int    borderline_posi: -1                     // 下划线 0左 1上 2右 3下
    property real   borderline_width: 2*dp

    // 状态样式 可设置状态: [默认]、[悬浮]、[点击]、[选中]、[禁用] ====================================
    // 默认样式
    property color  button_color: "white"                                   // 背景颜色
    property color  text_color: config.reverseStepColor(button_color)       // 文字颜色
    property color  button_border: "transparent"                            // 边框颜色
    property string button_icon: ""                         // 图标 (默认无图标)
    property color  icon_color: "transparent"                          // 图标颜色 (不咋好用)
    property color  borderline_color: "transparent"         // 线条颜色
    property color  button_color_2: button_color            // 渐变时效果

    // 选中样式
    property string button_icon_select: button_icon
    property color button_color_select: button_color
    property color text_color_select: text_color
    property color button_border_select: button_border
    property color icon_color_select: icon_color
    property color borderline_color_select: borderline_color
    property color  button_color_2_select: button_color_2

    // 悬浮时样式
    property string button_icon_hover: button_icon
    property color button_color_hover: config.deepColor(button_color)
    property color text_color_hover: text_color
    property color button_border_hover: button_border
    property color icon_color_hover: icon_color
    property color borderline_color_hover: borderline_color
    property color  button_color_2_hover: button_color_2

    // 点击样式
    property string button_icon_press: button_icon
    property color button_color_press: button_color
    property color text_color_press: text_color
    property color button_border_press: button_border
    property color icon_color_press: icon_color
    property color borderline_color_press: borderline_color
    property color  button_color_2_press: button_color_2

    // 禁用样式
    property string button_icon_disable: button_icon
    property color button_color_disable: colorGradient ? "#DDDDDD" : "#F5F5F5"
    property color text_color_disable: "#BFBFBF"
    property color button_border_disable: "#CCCCCC"
    property color icon_color_disable: "#CCCCCC"
    property color borderline_color_disable: borderline_color
    property color  button_color_2_disable: "#666666"


    // private ======================================================================================
    property bool isPressed: false
    property bool isHovered: false
    property real titleWidth: idText.contentWidth


    // 预设方案设置
    Component.onCompleted: {
        if(defaultMode1){               // 蓝色按钮
            button_color = Qt.binding(function(){return config.themeColor})
            text_color   = "white"
        }else if(defaultMode2){         // 白色按钮
            button_color = "white"
            text_color   = "#333333"
            button_border = "#CCCCCC"
            button_border_hover = "#1677FF"
            text_color_hover = "#1677FF"
            button_color_hover = "#ecf5ff"
        }else if(defaultMode3){         // 蓝色文字无边框按钮
            button_color = "transparent"
            text_color = Qt.binding(function(){return config.themeColor})
            text_color_hover = Qt.binding(function(){return config.themeColor_light1})
        }else if(defaultMode4){     // 竖向渐变按钮
            text_color = "white"
            gradientDirect = 1
            colorGradient = true
            button_color_2 = "#0018D1"
            button_color = "#8C97ED"
            button_color_press = "#0018D1"
            button_color_2_press = "#8C97ED"
        }
    }


    // 按钮背景
    Rectangle{
        id: idRectangle
        anchors.fill: parent
        color: {
            if(!root.enabled){
                return button_color_disable
            }else if(isSelected){
                return button_color_select
            }else if(isPressed){
                return button_color_press
            }else if(isHovered){
                return button_color_hover
            }else{
                return button_color
            }
        }
        border.color: {
            if(!root.enabled){
                return button_border_disable
            }else if(isSelected){
                return button_border_select
            }else if(isPressed){
                return button_border_press
            }else if(isHovered){
                return button_border_hover
            }else{
                return button_border
            }
        }
        radius: root.radius

        // 渐变版按钮
        LinearGradient{
            id: grad_bcg
            visible: false
            anchors.fill: parent
            start: Qt.point(0, 0)
            end: gradientDirect===0 ? Qt.point(width, 0) : Qt.point(0, height)
            gradient: Gradient{
                GradientStop {
                    position: 0.0;
                    color: {
                        if(!root.enabled){
                            return button_color_disable
                        }else if(isSelected){
                            return button_color_select
                        }else if(isPressed){
                            return button_color_press
                        }else if(isHovered){
                            return button_color_hover
                        }else{
                            return button_color
                        }
                    }
                }GradientStop {
                    position: 1.0;
                    color: {
                        if(!root.enabled){
                            return button_color_2_disable
                        }else if(isSelected){
                            return button_color_2_select
                        }else if(isPressed){
                            return button_color_2_press
                        }else if(isHovered){
                            return button_color_2_hover
                        }else{
                            return button_color_2
                        }
                    }
                }
            }
        }
        Rectangle{
            id: maskRect
            anchors.fill: parent
            color: "black"
            visible: false
            radius: root.radius
        }
        OpacityMask{
            id: mask_grad_bcg
            visible: colorGradient
            anchors.fill: parent
            source: grad_bcg
            maskSource: maskRect
        }

    }
    // 按钮图标
    Image {
        id: idImage
        height: icon_size
        width:  icon_size
        anchors.centerIn: parent
        anchors.horizontalCenterOffset:{
            if(iconDirect === 0){
                return - idText.contentWidth/2 - 1*dp
            }else if(iconDirect == 2){
                return + idText.contentWidth/2 + 1*dp
            }else{
                return 0
            }
        }
        anchors.verticalCenterOffset: {
            if(iconDirect === 1){
                return - idText.contentHeight/2 - 1*dp
            }else if(iconDirect == 2){
                return  + 1*dp
            }else{
                return 0
            }
        }
        source: {
            if(!root.enabled){
                return button_icon_disable
            }else if(isSelected){
                return button_icon_select
            }else if(isPressed){
                return button_icon_press
            }else if(isHovered){
                return button_icon_hover
            }else{
                return button_icon
            }
        }
        mipmap: true
        ColorOverlay{
            visible: icon_color.a !== 0
            anchors.fill: parent
            source: parent
            color: {
                if(!root.enabled){
                    return icon_color_disable
                }else if(isSelected){
                    return icon_color_select
                }else if(isPressed){
                    return icon_color_press
                }else if(isHovered){
                    return icon_color_hover
                }else{
                    return icon_color
                }
            }
        }
    }
    // 按钮文字
    Text{
        id: idText
        font.pixelSize: text_size
        anchors.centerIn: parent
        font.italic: font_italic
        font.bold: font_bold
        anchors.horizontalCenterOffset: {
            if(button_icon == "") return 0
            if(iconDirect === 0){
                return icon_size/2 + 1*dp
            }else if(iconDirect == 2){
                return - icon_size/2 - 1*dp
            }else{
                return 0
            }
        }
        anchors.verticalCenterOffset: {
            if(button_icon == "") return 0
            if(iconDirect === 1){
                return icon_size/2 + 1*dp
            }else if(iconDirect == 3){
                return - icon_size/2 - 1*dp
            }else{
                return 0
            }
        }

        text: title
        color: {
            if(!root.enabled){
                return text_color_disable
            }else if(isSelected){
                return text_color_select
            }else if(isPressed){
                return text_color_press
            }else if(isHovered){
                return text_color_hover
            }else{
                return text_color
            }
        }
    }

    // 按钮下面的小杠杠
    Rectangle{                             // 下划线 0左 1上 2右 3下
        visible: borderline_posi >= 1
        width: {
            if(borderline_posi === 1 || borderline_posi === 3){
                return parent.width
            }else{
                return borderline_width
            }
        }
        height: {
            if(borderline_posi === 2 || borderline_posi === 0){
                return parent.height
            }else{
                return borderline_width
            }
        }
        x: {
            if(borderline_posi === 2){
                return root.width - width
            }else{
                return 0
            }
        }
        y: {
            if(borderline_posi === 3){
                return root.height - height
            }else{
                return 0
            }
        }

        color: {
            if(!root.enabled){
                return borderline_color_disable
            }else if(isSelected){
                return borderline_color_select
            }else if(isPressed){
                return borderline_color_press
            }else if(isHovered){
                return borderline_color_hover
            }else{
                return borderline_color
            }
        }
    }

    MouseArea{
        anchors.fill: parent
        cursorShape: Qt.PointingHandCursor
        hoverEnabled: config.hoverEnabled
        onEntered: {
            isHovered = true && config.hoverEnabled
        }onExited: {
            isHovered = false
        }

        onPressed: {
            isPressed = true
            root.pressed(mouseX, mouseY)
        }
        onReleased: {
            root.focus = true
            isPressed = false

            var mousePos = mapToItem(root, mouseX, mouseY)
            if(mousePos.x<0 || mousePos.y<0 || mouse.x>root.width || mouse.y>root.height){
                return
            }

            if (root.enabled){
                root.released(mouseX, mouseY)
            }else{
                root.released_disabled(mouseX, mouseY)
            }
        }
        onClicked: {
            root.focus = true
            if (root.enabled){
                root.clicked(mouseX, mouseY)
            }else{
                root.clicked_disabled(mouseX, mouseY)
            }
        }
    }

}
